
<!DOCTYPE HTML><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/splash/splash-icon-big.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 	media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

<title>Epsilon Mobile Framework - Version 2.0</title>

<link href="styles/style.css"     		 rel="stylesheet" type="text/css">
<link href="styles/framework.css" 		 rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="styles/animate.css"			 rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

</head>
<body> 

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>
    
       
<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>
    
    <div class="header">
        <a href="#" class="main-logo"></a>
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
    </div> 
    
    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>
    
    <!-- Page Content-->
    <div id="content" class="snap-content">        
        <div class="header-clear"></div>
        <div class="content">
            <h3>Pie Charts</h3>
            <p>Pie charts are amazing, and very easy to use in our template, the variables
            are already inside the custom.js file, you simply copy and paste these
            variables, duplicate the pie ID, and you succesfully created another
            responsive chart!</p>   

            <div class="container">  
                <div class="one-half-responsive">
                    <div class="full-bottom" id="pie-chart">
                        <canvas id="generate-pie-chart"></canvas>
                    </div>  
                </div>
                <div class="one-half-responsive last-column">
                    <h3>Pie Statistics</h3>
                    <p class="no-bottom"><em class="chart-box" style="background-color:#c0392b"></em>50% More Red!</p>
                    <p class="no-bottom"><em class="chart-box" style="background-color:#2ecc71"></em>10% More Green!</p>
                    <p class="no-bottom"><em class="chart-box" style="background-color:#f1c40f"></em>10% More Yellow!</p>
                    <p class="no-bottom"><em class="chart-box" style="background-color:#2c3e50"></em>10% More Blue!</p>
                </div>
            </div>

            <div class="decoration"></div>

            <h3>Bar Charts</h3>
            <p>Pie charts are amazing, and very easy to use in our template, the variables
            are already inside the custom.js file, you simply copy and paste these
            variables, duplicate the pie ID, and you succesfully created another
            responsive chart!</p>   

            <div class="container">  
                <div class="one-half-responsive">
                    <div class="full-bottom" id="bar-chart">
                        <canvas id="generate-bar-chart"></canvas>
                    </div>  
                </div>
                <div class="one-half-responsive last-column">
                    <h3>Bar Statistics</h3>
                    <p class="no-bottom"><strong class="chart-text">One: </strong>50% More Red!</p>
                    <p class="no-bottom"><strong class="chart-text">Two: </strong>10% More Green!</p>
                    <p class="no-bottom"><strong class="chart-text">Three: </strong>10% More Yellow!</p>
                    <p class="no-bottom"><strong class="chart-text">Four:</strong>10% More Blue!</p>
                </div>
            </div>

            <div class="decoration"></div>
            <div class="one-half-responsive">
                <div class="container half-bottom">
                <h3>CSS3 Horizontal Square Charts</h3>
                <p>Charts are awesome, important and they are a must, multiple color variations to make it sweet!</p>
                    <div class="chart">
                        <strong>A red chart</strong>
                        <em>10%</em>
                        <div class="chart-background">
                            <div class="red-chart p10"></div>
                        </div>
                    </div>
                    <div class="chart">
                        <strong>A yellow chart</strong>
                        <em>30%</em>
                        <div class="chart-background">
                            <div class="yellow-chart p30"></div>
                        </div>
                    </div>
                    <div class="chart">
                        <strong>A blue chart</strong>
                        <em>50%</em>
                        <div class="chart-background">
                            <div class="blue-chart p50"></div>
                        </div>
                    </div>
                    <div class="chart">
                        <strong>And a green chart!</strong>
                        <em>90%</em>
                        <div class="chart-background">
                            <div class="green-chart p90"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="decoration hide-if-responsive"></div>

            <div class="one-half-responsive last-column">
                <div class="container half-bottom">
                <h3>CSS3 Horizontal Rounded Charts</h3>
                <p>Charts are awesome, important and they are a must, multiple color variations to make it sweet!</p>
                    <div class="chart chart-round">
                        <strong>A red chart</strong>
                        <em>10%</em>
                        <div class="chart-background">
                            <div class="red-chart p10"></div>
                        </div>
                    </div>
                    <div class="chart chart-round">
                        <strong>A yellow chart</strong>
                        <em>30%</em>
                        <div class="chart-background">
                            <div class="yellow-chart p30"></div>
                        </div>
                    </div>
                    <div class="chart chart-round">
                        <strong>A blue chart</strong>
                        <em>50%</em>
                        <div class="chart-background">
                            <div class="blue-chart p50"></div>
                        </div>
                    </div>
                    <div class="chart chart-round">
                        <strong>And a green chart!</strong>
                        <em>90%</em>
                        <div class="chart-background">
                            <div class="green-chart p90"></div>
                        </div>
                    </div>
                </div>  
            </div>
            <div class="clear"></div>

            <div class="decoration"></div>
            
        </div>
        <!-- Page Footer-->
        <div class="footer">
            <p class="center-text">Copyright 2015. All rights reserved.</p>
            <div class="footer-socials half-bottom">
                <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="footer-transparent"></a>
                <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
            </div>
        </div>    
        
    </div>
    
    <div class="share-bottom">
        <h3>Share Page</h3>
        <div class="share-socials-bottom">
            <a href="">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
    
</div>

</body>

